<template>
	<view class="searchBar-container">
		<view :class="{ searchBar: true, showShadow: props.needShadow }">
			<image src="@/static/search-icon.png" class="searchIcon"></image>
			<input v-model="searchValue" type="text" :placeholder="props.placeholder" class="searchInput" />
			<view @click="search" class="search-btn">搜索</view>
		</view>
	</view>
</template>

<script setup>
const searchValue = defineModel();

const props = defineProps({
	placeholder: {
		type: String,
		default: ''
	},
	needShadow: {
		type: Boolean,
		default: true
	}
});

const emit = defineEmits(['search']);

const search = () => {
	emit('search', searchValue.value);
};
</script>

<style lang="scss" scoped>
.searchBar-container {
	.searchBar {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		border-radius: 104rpx;
		padding: 26rpx 0 26rpx 26rpx;

		.searchIcon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 12rpx;
		}

		.searchInput {
			flex: 1;
		}

		.search-btn {
			position: relative;
			font-size: 28rpx;
			font-weight: 500;
			color: $uni-main-color;
			padding: 0 48rpx 0 40rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				display: inline-block;
				width: 2rpx;
				height: 32rpx;
				border-radius: 2rpx;
				background-color: #00c58233;
			}
		}
	}

	.showShadow {
		box-shadow: 0px 2px 12px 0px #0085790f;
	}
}
</style>
